<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/css/custom.form.css">
</head>
<body>
<div class="panel panel-default operation" hidden>
  <div class="panel-heading title"></div>
<div class="layui-card-body">
<form class="layui-form " action="" lay-filter="info" style="width: 700px;margin-top: 10px">
      <input name="id" hidden/>
      <input name="pClassId" hidden/>
        <div class="layui-form-item">
      <label class="layui-form-label">项目名称</label>
      <div class="layui-input-block">
        <input type="pName" name="pName" placeholder="请输入项目名称" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">负责人</label>
      <div class="layui-input-block">
          <select id="pDirectorId" name="pDirectorId" lay-filter="select-type" th:with="user=${@userService.getUserSelectList()}">
              <option value="">请选择</option>
              <option th:each="u : ${user}" th:text="${u.realName}" th:value="${u.id}"></option>
          </select>
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">验收标准</label>
      <div class="layui-input-block">
          <textarea placeholder="请输入验收标准" class="layui-textarea" name="pAcceptanceCriteria"></textarea>
      </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">年度</label>
        <div class="layui-input-block">
            <input type="pYear" name="pYear" placeholder="请输入年度" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">完成时间</label>
      <div class="layui-input-block">
          <select name="pFinishTime" id="pFinishTime">
              <option value="">请选择</option>
              <option value="1">一月</option>
              <option value="2">二月</option>
              <option value="3">三月</option>
              <option value="4">四月</option>
              <option value="5">五月</option>
              <option value="6">六月</option>
              <option value="7">七月</option>
              <option value="8">八月</option>
              <option value="9">九月</option>
              <option value="10">十月</option>
              <option value="11">十一月</option>
              <option value="12">十二月</option>
          </select>
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">资金</label>
      <div class="layui-input-block">
        <input type="pBudget" name="pBudget" placeholder="请输入资金（单位：万元）" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">所属任务</label>
      <div class="layui-input-block">
          <input type="pClassName" name="pClassName" placeholder="请选择所属项目分类" autocomplete="off" class="layui-input"
                 readonly="readonly" style="background:#eeeeee!important">
      </div>
    </div>
  <div class="layui-form-item">
  <div class="layui-input-block">
    <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">保存</button>
    <button  class="layui-btn layui-btn-primary" id="btn_cancel">返回</button>
  </div>
</div>
</form>
</div>
</div>
<!-- 左树 -->
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm12 layui-col-md4 layui-col-lg3">
            <div class="layui-card">
                <div class="layui-card-body mini-bar" id="leftTree">
                </div>
            </div>
        </div>
        <div class="layui-col-sm12 layui-col-md8 layui-col-lg9">
        <div class="table_div">
          <div id="searchParam"  shiro:hasPermission="tProjectInfo:list">
            <div class="layui-form-item">
              <div class="layui-input-inline">
                <input type="text" id="pName" class="layui-input"  autocomplete="off" placeholder="请输入项目名称">
              </div>
                <div class="layui-input-inline">
                    <input type="text" id="pDirector" class="layui-input"  autocomplete="off" placeholder="请输入负责人姓名">
                </div>
                <div class="layui-input-inline">
                    <input type="text" id="pYear" class="layui-input"  autocomplete="off" placeholder="请输入查询年度">
                </div>
              <div class="layui-input-inline ">
                <button class="layui-btn" onclick="search()"  id="search">查询</button>
                <button class="layui-btn"   id="export">导出全部</button>
              </div>
            </div>

          </div>
          <table class="layui-table" id="showTable" lay-filter="showTable" ></table>
        </div>
    </div>
</div>
<script type="text/html" id="toolbar">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add"  shiro:hasPermission="tProjectInfo:add">添加</button>
    <button class="layui-btn layui-btn-sm" lay-event="batchDeleted" shiro:hasPermission="tProjectInfo:delete">删除</button>
  </div>
</script>
<script type="text/html" id="tool">
  <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="stepList" shiro:hasPermission="sysProjectStep:list">附件上传</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit" shiro:hasPermission="tProjectInfo:update">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" shiro:hasPermission="tProjectInfo:delete">删除</a>
</script>
<div id="classTree" style="display: none"></div>
</body>
</html>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script>
  //获取token
  var token = CoreUtil.getData("access_token");
  //地址栏转义token中的#号
  var tokenQuery = token.replace("#", "%23");
  var tableIns1;
  var table = layui.table;
  var form = layui.form;
  var layer = layui.layer;
  var tree = layui.tree;
  var $ = jQuery = layui.jquery;
  var laydate = layui.laydate;
  var pClassId = null;

  layui.use(['table', 'layer', 'tree', 'laydate'], function () {
    initLeftTree();
    //加载table
    tableIns1 = table.render({
      elem: '#showTable'
      , contentType: 'application/json'
      , headers: {"authorization": token}
      , page: true //开启分页
      , url: '/project/listByPage' //数据接口
      , method: 'POST'
      , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.msg, //解析提示文本
          "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
          "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
        }
      }
      , cols: [
        [
          {type: 'checkbox', fixed: 'left'},
          {field: 'pYear', title: '年度', sort: true, width: 100, templet:function(item){
              if (item.pYear === null || item.pYear === undefined) {
                return "无";
              }
              return item.pYear + " 年";
            }
          },
          {field: 'pFinishTime', title: '完成时间', width: 100, sort: true,templet:function(item){
              if (item.pFinishTime === null || item.pFinishTime === undefined) {
                return "无";
              }
              return item.pFinishTime + " 月";
            }
          },
          {field: 'pName', title: '项目名称', width: 700, sort: true},
          {field: 'pAcceptanceCriteria', title: '验收标准', width: 700, sort: true},
          {field: 'pDirector', title: '负责人', width: 100, sort: true},
          {field: 'pCreateTime', title: '提交时间', width: 165,sort: true},
          {field: 'pBudget', title: '资金', sort: true, width: 100, templet:function(item){
              return item.pBudget + " 万元";
            }},
          {field: 'pStatus', title: '状态', width: 100, sort: true, templet: function (item) {
              if (item.pStatus === 0) {
                return "待启动";
              }
              if (item.pStatus === 1) {
                return "已启动";
              }
              if (item.pStatus === 2) {
                return "逾期";
              }
              if (item.pStatus === 3) {
                return "已完成";
              }
            }
          },
          {width: 200, toolbar: "#tool", fixed:'right', title: '操作'}
        ]
      ]
      , toolbar: '#toolbar'
    });


    //表头工具
    table.on('toolbar(showTable)', function(obj){
      switch(obj.event){
        case 'batchDeleted':
          var checkStatus = table.checkStatus(obj.config.id);
          var data = checkStatus.data;
          if(data.length==0){
            layer.msg("请选择要批量删除的列");
          }else {
            var ids = [];
            $(data).each(function (index,item) {
              ids.push(item.id);
            });
            tipDialog(ids);
          }
          break;
        case 'add':
          $(".table_div").hide();
          $("#leftTree").hide();
          $(".operation").show();
          $(".title").html("新增");
          $(".operation input[name=id]").val("");
          $(".operation input[name=pName]").val("");
          $(".operation input[name=pCreateTime]").val("");
          $(".operation input[name=pDirectorId]").val("");
          $(".operation input[name=pDirector]").val("");
          $(".operation input[name=pAcceptanceCriteria]").val("");
          $(".operation select[name=pFinishTime]").val("");
          $(".operation input[name=pYear]").val("");
          $(".operation input[name=pBudget]").val("");
          $(".operation input[name=pStatus]").val("");
          $(".operation input[name=deleted]").val("");
          $(".operation input[name=pClassId]").val("");
          break;
      };
    });
    //列操作
    table.on('tool(showTable)',function (obj) {
      var data = obj.data;
      console.log(data);
      switch (obj.event) {
        case 'del':
          var ids=[];
          ids.push(data.id);
          tipDialog(ids);
          break;
        case 'edit':
          $(".table_div").hide();
          $("#leftTree").hide();
          $(".operation").show();
          $(".title").html("编辑项目");
          $(".operation input[name=id]").val(data.id);
          $(".operation input[name=pName]").val(data.pName);
          $(".operation input[name=pCreateTime]").val(data.pCreateTime);
          $(".operation input[name=pDirectorId]").val(data.pDirectorId);
          //渲染select 默认选中
          if (!CoreUtil.isEmpty(data.pDirectorId)) {
            $("#pDirectorId").find('option[value="'+data.pDirectorId+'"]').prop('selected',true);
            form.render();
          }
          $(".operation input[name=pDirector]").val(data.pDirector);
          $(".operation textarea[name=pAcceptanceCriteria]").val(data.pAcceptanceCriteria);
          var finishSelect = 'dd[lay-value=' + data.pFinishTime + ']';
          $('#pFinishTime').siblings("div.layui-form-select").find("dl").find(finishSelect).click();
          $(".operation input[name=pYear]").val(data.pYear);
          $(".operation input[name=pBudget]").val(data.pBudget);
          $(".operation input[name=pStatus]").val(data.pStatus);
          $(".operation input[name=pClassId]").val(data.pClassId);
          $(".operation input[name=pClassName]").val(data.pClassName);
          break;
        case 'stepList':
          window.location.href = "/index/sysProjectStep/" + data.id;
          break;
      }
    });

    //导出
    $('#export').on('click', function () {
      //原先分页limit
      var exportParams = {
        limit: 10000,
        pYear: $("#pYear").val(),
        pName: $("#pName").val(),
        pDirector: $("#pDirector").val(),
        pClassId: pClassId
      };
      CoreUtil.sendPost("/project/listByPage", exportParams, function (res) {
        //初始化渲染数据
        if (res.data != null && res.data.records != null) {
          table.exportFile(tableIns1.config.id, res.data.records, 'xls');
        }
      });
    });

    //删除
    var tipDialog=function (ids) {
      layer.open({
        content: "确定要删除么?",
        yes: function(index, layero){
          layer.close(index); //如果设定了yes回调，需进行手工关闭
          CoreUtil.sendDelete("/project/delete",ids,function (res) {
            layer.msg(res.msg, {time:1000},function () {
              search();
            });
          });
        }
      });
    };

    //返回
    $("#btn_cancel").click(function() {
      $(".table_div").show();
      $(".operation").hide();
      $("#leftTree").show();
      return false;
    });

    //监听保存
    form.on('submit(submit)', function(data){
      if(data.field.id===undefined || data.field.id===null || data.field.id===""){
        CoreUtil.sendPost("/project/add",data.field,function (res) {
          $(".table_div").show();
          $("#leftTree").show();
          $(".operation").hide();
          search();
        });
      }else {
        CoreUtil.sendPut("/project/update",data.field,function (res) {
          $(".table_div").show();
          $("#leftTree").show();
          $(".operation").hide();
          search();
        });
      }

      return false;
    });
    var loadLeftTree = function (data) {
      tree.render({
        elem: '#leftTree'
        , data: data
        , onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
        , click: function (obj) {
              pClassId = obj.data.id;
              $("#leftTree span").removeClass('custom-tree-item-clicked');     //清除旧的样式
              $("#leftTree span:contains(" + obj.data.title + ")").addClass('custom-tree-item-clicked');
          search()

        }
      });
    };
    var loadClassTree = function (data) {
        tree.render({
            elem: '#classTree'
            , data: data
            , onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
            , click: function (obj) {
                console.log(obj);
                selectNode = obj;
                layer.msg(selectNode.data.realTitle);
            }
        });
    };
    $(".operation input[name=pClassName]").click(function () {
        layer.open({
            type: 1,
            skin: 'layui-layer-molv',
            title: "选择项目分类",
            area: ['400px', '450px'],
            shade: 0,
            shadeClose: false,
            content: jQuery("#classTree"),
            btn: ['确定', '取消'],
            yes: function (index) {
                if (selectNode.data != null) {
                    //选中回显
                    $(".operation input[name=pClassId]").val(selectNode.data.id);
                    $(".operation input[name=pClassName]").val(selectNode.data.realTitle);
                }
                layer.close(index);
            }
        });
    });
    function initLeftTree(){
      CoreUtil.sendGet("/sysClassification/tree", null, function (res) {
        loadLeftTree(res.data);
        loadClassTree(res.data);
      });
    }
  });

  //执行查询
  function search() {
    //这里以搜索为例
    tableIns1.reload({
      where: { //设定异步数据接口的额外参数，任意设
        pYear: $("#pYear").val(),
        pName: $("#pName").val(),
        pDirector: $("#pDirector").val(),
        pClassId: pClassId
      }
      , page: {
        curr: 1 //重新从第 1 页开始
      }
    });
  };
</script>